fValidate v5.00b - A javascript form validation tool by Peter Bailey

bok

All text-based validators will error if the field is blank, thereby making it required. To exclude a field from being required but still validated for format when data is entered, append the bok flag to any validation type for a text-based form control. Examples:

<input type="text" name="Age" alt="number|0|100|bok" />

<input type="text" name="Number" alt="numeric|bok" />

<textarea name="Comments" alt="length|10|200|bok"></textarea>

bok MUST be the last parameter. You do not have to enter values for optional parameters for bok to work, as it is stripped away before parameters are assessed.

Post-validation options

fValidate gives you several options to exercise after the form has been validated, which are set via the main function.

bConfirm

This boolean flag tells fValidate whether or not to display a confirm dialog to the user before submitting the form. The message in this dialog can be customized by changing the confirmMsg variable in fValidate.config.js. Futhermore, if the user cancels the submission, an optional alert will be displayed to let him/her know that it indeed has been canceled. The text of this final alert is stored in the confirmAbortMsg variable, also in the config. Changing it to an empty string will skip the display of this final alert.

bDisable

This boolean flag tells fValidate whether or not to disable the form's submit button(s) after validation. The name(s) of the submit button(s) must be set in the config. Default value is 'Submit'.

bDisableR

This boolean flag tells fValidate whether or not to disable the form's reset button after validation. The name of this button must be set in the config. Default value is 'Reset'.

Group Error Mode

By default, fValidate will display errors to the user one at a time. You can instead have fValidate compile a list of errors and display them all at once to the user. Set this flag to a boolean true.

Error Notification

fValidate comes with 29 pre-defined error modes. Each is a single use or combination of the following error types:

• alert - shows a system alert containing the error to the user.
• input - colors the element that generated the error with the CSS class-name defined in the config.
• label - colors the label of the element that errored (if it has an associated label) with the CSS class-name defined in the config.
• append - appends the error message to the label of the element that generated the error
• box - appends the error message to a config-defined element on the page

The predefined modes are accessed via a zero-based numeric index plugged into the errorMode parameter of the main function and described as follows:

0. alert
1. input
2. label
3. append
4. box
5. input, label
6. input, append
7. input, box
8. input, alert
9. label, append
10. label, box
11. label, alert
12. append, box
13. append, alert
14. box, alert
15. input, label, append
16. input, label, box
17. input, label, alert
18. input, append, box
19. input, append, alert
20. input, box, alert
21. label, append, box
22. label, append, alert
23. append, box, alert
24. input, label, append, box
25. input, label, append, alert
26. input, append, box, alert
27. label, append, box, alert
28. input, label, append, box, alert

Since this parameter is optional, the default is 0. Visit the CSS setup page to learn how to property set your CSS stylesheet for these error modes.

The 'Box' Error Type

The box error type requires a little setup. First, make sure you have its ID propertly entered in the config. Then, use the following HTML where you want the error message to appear:

<ul id="errors">
	<li class="heading">Click the individual error message below to focus on the element in error</li>
</ul>

Of course, you can enter any message you wish - I just happen to think this one is quite helpful. In fuure versions of fValidate, I will look into automating this process.

Custom Error Messages

Since version 3.14b, fValidate has allowed you to specify a custom error message per element. The config specifies the attribute used to hold this error message. By default, this value is 'emsg'.

Examples

Assuming no change in the default config setting:

<input type="text" name="First_Name" alt="blank" emsg="Enter your name already!" />

Assuming emsg has been changed to 'error in the config

<input type="password" name="Password" alt="length|6" error="Password required" />

To insert a newline in your custom error message, just insert the escaped newline character, "\n".

<input type="password" name="Password" alt="length|6" emsg="Hello\nWorld" />